<template>
    <div>
      <div class="row">
        <div style="flex-shrink: 0;font-size: 14px;">序号：</div><el-input size="mini"
          style="width: 60px;margin-right: 20px;" v-model="nodeModel.sort"></el-input>
        <div style="flex-shrink: 0;font-size: 14px;">是否显示：</div><el-switch v-model="nodeModel.isShow" :active-value="true"
            :inactive-value="false" active-color="#13ce66" inactive-color="#999999"></el-switch>
          <div style="margin-left: 20px;">
            <el-button @click="selectTemplate" size="mini">选用模版</el-button>
          </div>
      </div>
      <div class="row">
        <div style="flex-shrink: 0;font-size: 14px;margin-right: 20px;">样式：</div>
        <el-radio v-model="nodeModel.configDict.componentStyle.type" label='1'>侧标样式</el-radio>
        <el-radio v-model="nodeModel.configDict.componentStyle.type" label='2'>背景色样式</el-radio>
      </div>
      <div class="row">
        <div style="flex-shrink: 0;font-size: 14px;margin-left: 20px;">选中字体颜色：</div>
        <el-input size="mini" style="width: 100px;" v-model="nodeModel.configDict.componentStyle.colorForBtn1"></el-input>
        <el-color-picker v-model="nodeModel.configDict.componentStyle.colorForBtn1"></el-color-picker>
        <div style="flex-shrink: 0;font-size: 14px;margin-left: 20px;">主题色：</div>
        <el-input size="mini" style="width: 100px;" v-model="nodeModel.configDict.componentStyle.mainColor"></el-input>
        <el-color-picker v-model="nodeModel.configDict.componentStyle.mainColor"></el-color-picker>
      </div>
      <div class="column">
          <jcSlider title="左侧宽："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.marginLeft" :min="0" :max="750" show-input input-size="mini"></el-slider></jcSlider>
          <jcSlider title="右侧宽："><el-slider slot="slider" v-model="nodeModel.configDict.componentStyle.marginRight" :min="0" :max="750" show-input input-size="mini"></el-slider></jcSlider>
      </div>

        <div style="background-color: #eee;width: 600px;height: 1px;margin-left: 20px;margin-top: 10px;"></div>
        <div class="column">
        <div style="flex-shrink: 0;font-size: 14px;font-weight: bold;">区域一：</div>
        <div class="row">
            <div style="flex-shrink: 0;font-size: 14px;">是否显示：</div>
            <el-radio v-model="nodeModel.configDict.componentStyle.isShowForBtn1" :label='true'>是</el-radio>
            <el-radio v-model="nodeModel.configDict.componentStyle.isShowForBtn1" :label='false'>否</el-radio>
            <div style="flex-shrink: 0;font-size: 14px;margin-right: 10px;">标题：</div><el-input size="mini" style="width: 120px;margin-right: 20px;"  v-model="nodeModel.configDict.componentStyle.options1"></el-input>
        </div>
        <div style="border: 1px solid #eee;padding: 10px;margin-top: 10px;">
        <div style="display: flex;flex-direction: row;margin-bottom: 10px;position: relative;margin-top: 20px;" v-for="(item, index) in nodeModel.configDict.itemList" :key='index'  v-if="item.types=='group1'">
            <div style="width: 100%;">
                <div style="margin-left: 10px;display: flex;flex-direction: row;">
                <div style="display: flex;flex-direction: row;align-items: center;"><div style="flex-shrink: 0;">序号：</div><el-input style="width: 60px;" v-model="item.sort"></el-input></div>
                <div style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;"><div style="flex-shrink: 0;">标题：</div><el-input v-model="item.title"></el-input></div>
                </div>
                <div style="margin-left: 10px;margin-top: 10px;display: flex;flex-direction: row;">
                <div style="width: 100%;"><el-input style="margin-left: 0px;" v-model="item.query"></el-input></div>
                <div><el-button @click="selectRoute(item, 'group1')">筛选条件</el-button></div>
                </div>
            </div>
            <div style="position: absolute;left: -15px;top: -15px;" @click="deleteAdvert(index)"><i class="el-icon-circle-close"></i></div>
            </div>
            <div style="width: 100%;margin-left: 10px;"><el-button @click="insertAdvert('group1')">添加一个</el-button></div>
        </div>
        </div>
        <div style="background-color: #eee;width: 600px;height: 1px;margin-left: 20px;margin-top: 10px;"></div>
        <div class="column">
        <div style="flex-shrink: 0;font-size: 14px;font-weight: bold;">区域二：</div>
        <div class="row">
            <div style="flex-shrink: 0;font-size: 14px;">是否显示：</div>
            <el-radio v-model="nodeModel.configDict.componentStyle.isShowForBtn2" :label='true'>是</el-radio>
            <el-radio v-model="nodeModel.configDict.componentStyle.isShowForBtn2" :label='false'>否</el-radio>
            <div style="flex-shrink: 0;font-size: 14px;margin-right: 10px;">标题：</div><el-input size="mini" style="width: 120px;margin-right: 20px;"  v-model="nodeModel.configDict.componentStyle.options2"></el-input>
        </div>
        <div style="border: 1px solid #eee;padding: 10px;margin-top: 10px;">
        <div style="display: flex;flex-direction: row;margin-bottom: 10px;position: relative;margin-top: 20px;" v-for="(item, index) in nodeModel.configDict.itemList" :key='index' v-if="item.types=='group2'">
            <div style="width: 100%;">
                <div style="margin-left: 10px;display: flex;flex-direction: row;">
                <div style="display: flex;flex-direction: row;align-items: center;"><div style="flex-shrink: 0;">序号：</div><el-input style="width: 60px;" v-model="item.sort" size="mini"></el-input></div>
                <div style="display: flex;flex-direction: row;align-items: center;margin-left: 10px;"><div style="flex-shrink: 0;">标题：</div><el-input v-model="item.title" size="mini"></el-input></div>
                </div>
                <div style="margin-left: 10px;margin-top: 10px;display: flex;flex-direction: row;">
                <div style="width: 100%;"><el-input style="margin-left: 0px;" v-model="item.query" size="mini"></el-input></div>
                <div><el-button @click="selectRoute(item, 'group2')">筛选条件</el-button></div>
                </div>
            </div>
            <div style="position: absolute;left: -15px;top: -15px;" @click="deleteAdvert(index)"><i class="el-icon-circle-close"></i></div>
            </div>
            <div style="width: 100%;margin-left: 10px;"><el-button @click="insertAdvert('group2')">添加一个</el-button></div>
        </div>
      </div>
      <!-- 商品信息区域 -->
      <!-- <itemInfo :nodeModel="nodeModel"></itemInfo> -->
    </div>
</template>

<script>
    import custom from '@/components/jcupload/custom'
    import jcSlider from '@/views/interface/composing/components/jc-slider'
    import itemInfo from '@/views/interface/composing/placeRight/components/itemInfo'
    import {tools} from '@/utils/tools.js'
    import { request_get } from '@/api/interface/operate.js'
  import { findActivityList } from "@/api/merchant/activity.js";
  export default {
    components: {
        custom,
        jcSlider,
        itemInfo
    },
    props:{
        nodeModel:{
            type: Object,
            default: res=>{}
        }
    },
    data() {
      return {
        checkedOptions: [],
        itemDict: {},
        optionList: [],
        checkedItem2: [],
        itemDict2: {},
        activityCateOptions: [],
        shopinCateOptions: [],
      }
    },
    created(){
      // this.findActivityList()
      this.findShopinCateList()
    },
    methods:{
      insertAdvert(types){
          this.$emit('insertAdvert', {name: 'itemCate', types: types})
      },
      deleteAdvert(index){
          this.$emit('deleteAdvert', index)
      },
      selectRoute(item, types){
          this.$emit('selectRoute', item, types)
      },
      findActivityList(){
        findActivityList({
            isGroup: 0
        }).then(res => {
            if(res.data.code == 10000){
                this.activityCateOptions = res.data.data.list
            }
        });
      },
      selectTemplate(){
          this.$emit('selectTemplate')
      },
      findShopinCateList(){
        request_get('/merchant/cate/', {}).then(res => {
            if(res.data.code == 10000){
                this.shopinCateOptions = res.data.data.list
            }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
     @import './commonStyle.scss';
</style>